<template>
	<view class="content">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="个人资料" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="baibox">
			<view class="baili">
				<view class="txt">
					头像
				</view>
				<view class="cenbox">
					<!-- #ifdef MP-WEIXIN -->
					<button class="headpic" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image :src="userInfo.pic | formatImgUrl" class="headpic" mode="aspectFill"></image>
					</button>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<!-- <button class="headpic" @click="onChooseImg">
						<image :src="userInfo.pic | formatImgUrl" class="headpic" mode="aspectFill" ></image>
					</button> -->
					<block v-if="is_avatar == 1">
						<button class="headpic" @tap="showTips(2)">
							<image :src="userInfo.pic | formatImgUrl" class="headpic" mode="aspectFill" ></image>
						</button>
					</block>
					<block v-else>
						<u-upload-avatar ref="uUploadAvatar" :uploadIcon="'/images/up.png' | formatImgUrl" borderRadius="50%" maxCount="1" width="45" height="45" :action="uploadImgUrl" :fileList="fileList" @afterRead='afterRead'>
						</u-upload-avatar>
					</block>
					
					<!-- #endif -->
				</view>
				<image :src="'/images/rarr.png' | formatImgUrl" class="rarr" mode=""></image>
			</view>
			<view class="baili" @click="is_nick == 1 ? showTips(1) : $go('/pages/user/name')">
				<view class="txt">
					昵称
				</view>
				<view class="cenbox">
					<view class="centxt">
						{{userInfo.username}}
					</view>
				</view>
				<image :src="'/images/rarr.png' | formatImgUrl" class="rarr" mode=""></image>
			</view>
			<view class="baili">
				<view class="txt">
					性别
				</view>
				<view class="cenbox" @tap="showType=true">
					<!-- <picker @change="bindPickerChange" :value="index" :range="array"> -->
						<view class="centxt">{{array[index]}}</view>
					<!-- </picker> -->
				</view>
				<image :src="'/images/rarr.png' | formatImgUrl" class="rarr" mode=""></image>
			</view>
			<view class="baili">
				<view class="txt">
					生日
				</view>
				<view class="cenbox">
					<picker mode="date" :value="userInfo.birthday?userInfo.birthday:date" @change="bindDateChange">
						<view class="centxt">{{userInfo.birthday?userInfo.birthday:date}}</view>
					</picker>
				</view>
				<image :src="'/images/rarr.png' | formatImgUrl" class="rarr" mode=""></image>
			</view>
			<view class="baili" @click="$go('/pages/user/label')">
				<view class="txt">
					标签
				</view>
				<view class="cenbox">
					<scroll-view scroll-x="true"  class="qianbox">
						<view class="qli" v-for="item in userInfo.user_tags">
							#{{item}}
						</view>
					</scroll-view>
				</view>
				<image :src="'/images/rarr.png' | formatImgUrl" class="rarr" mode=""></image>
			</view>
			<view class="baili" @click="is_sign == 1 ? showTips(3) : $go('/pages/user/signature')">
				<view class="txt">
					签名
				</view>
				<view class="cenbox">
					<view class="centxt oneline">
						{{userInfo.signature_des?userInfo.signature_des:'什么都没有说...来说点什么吧!'}}
					</view>
				</view>
				<image :src="'/images/rarr.png' | formatImgUrl" class="rarr" mode=""></image>
			</view>
			
			
			<view class="baili"  @click="go_auth()">
				<view class="txt">
					实名认证
				</view>
				<view class="cenbox">
					
					<view v-if="userInfo.is_auth==1" class="centxt oneline is_auth">
						已认证
					</view>
					<view v-if="userInfo.is_auth==0" class="centxt oneline is_no_auth">
						未认证
					</view>
				</view>
				<image :src="'/images/rarr.png' | formatImgUrl" class="rarr" mode=""></image>
			</view>
		</view>
		<!-- 头像弹框 -->
		<!-- <u-popup :show="show" @close="close" @open="open">
			<view class="mask">
				<view class="manei">
					<view class="matop" >
						<image src="../../static/images/paib.png" class="mapic" mode=""></image>
						<view class="matxt" >
							从相册中选择
						</view>
						<image src="../../static/images/rarr.png" class="mapic" mode=""></image>
					</view>
					<view class="matop" >
						<image src="../../static/images/paia.png" class="mapic" mode=""></image>
						<view class="matxt">
							拍照
						</view>
						<image src="../../static/images/rarr.png" class="mapic" mode=""></image>
					</view>
				</view>
				
				<view class="qubox" @click="show = false">
					取消
				</view>
			</view>
		</u-popup> -->
		
		<u-popup :show="showType" mode="bottom" @close="showType=false">
			<view class="custom-bot">
				<view class="title">
					性别
				</view>
				<picker-view :value="types" @change="changeType" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in array" :key="index">{{item}}</view>
					</picker-view-column>
				</picker-view>
		
				<view class="marginBorder"></view>
				<view class="btn" @tap="showType=false,saveType()">
					确认选择
				</view>
			</view>
		
		</u-popup>
	</view>
</template>
<script>
	import * as db from '@/common/db.js'
	import * as Config from '@/common/config.js' 
	export default { 
		data() {
			return {
				userInfo: this.$db.get('userInfo'),
				// 头像弹框
				show:false,
				// 标签
				erList:[],
				// 生日
				date: '',
				array: ['隐私', '男', '女'],
				index: 0,
				
				fileList: [],
				showType: false,
				types: [0],
				is_nick: '',
				is_avatar: '',
				is_sign: ''
			}
		},
		onShow() {
			this.getUserInfo()
			this.getAccountState()
		},
		onLoad() {
			let year = new Date().getFullYear();
			let month = new Date().getMonth() > 8 ? (new Date().getMonth() + 1) : '0' + (new Date().getMonth() + 1)
			let day = new Date().getDate() > 9 ? new Date().getDate() : '0' + new Date().getDate()
			this.date = year + '-' + month + '-' + day 
		},
		methods: {
			// 当前账号的冻结信息
			getAccountState(){
				this.$api.default.request('index/getStatus', {
					type: 8,//0冻结动态 1冻结聊天 2冻结橱窗 3抢单权限 4发单权限 5下单权限 6提现权限 7充值权限  8.冻结昵称 9冻结头像 10冻结个性签名
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.is_nick = res.is_dong
					}
				})
				
				this.$api.default.request('index/getStatus', {
					type: 9,//0冻结动态 1冻结聊天 2冻结橱窗 3抢单权限 4发单权限 5下单权限 6提现权限 7充值权限  8.冻结昵称 9冻结头像 10冻结个性签名
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.is_avatar = res.is_dong
					}
				})
				
				this.$api.default.request('index/getStatus', {
					type: 10,//0冻结动态 1冻结聊天 2冻结橱窗 3抢单权限 4发单权限 5下单权限 6提现权限 7充值权限  8.冻结昵称 9冻结头像 10冻结个性签名
				}, 'POST', false).then((res) => {
					if (res.code) {
						this.is_sign = res.is_dong
					}
				})
			},
			showTips(type){
				if(type == 1){
					this.$common.errorToShow('您的昵称修改权限已被暂时关停')
				}
				if(type == 2){
					this.$common.errorToShow('您的头像修改权限已被暂时关停')
				}
				if(type == 3){
					this.$common.errorToShow('您的签名修改权限已被暂时关停')
				}
			},
			changeType(e){
				this.types = e.detail.value
				this.index = e.detail.value[0]
			},
			saveType(){
				this.saveUser({
					'sex': this.index
				})
			},
			// 新增图片
			async afterRead(event) {
				const result = await this.uploadFilePromise(event.file_)
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					
					let a = uni.uploadFile({
						url: this.uploadImgUrl,
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let datas = JSON.parse(res.data)
							this.$refs.uUploadAvatar.updateAvatar([datas.url])
							this.saveUser({
								'pic': datas.url
							})
							setTimeout(() => {
								resolve(datas.url)
							}, 300)
						}
					});
				})
			},
			go_auth(){
				if(this.userInfo.is_auth==1){
					uni.navigateTo({
						url: '/pages/user/auth1'
					})
				}else{
					uni.navigateTo({
						url: '/pages/user/auth'
					})
				}
				
			},
			bindPickerChange: function(e) {
			            console.log('picker发送选择改变，携带值为', e.detail.value)
			            this.index = e.detail.value
						this.saveUser({
							'sex': this.index
						})
			},
			getUserInfo() {
				let that = this;
				this.$api.default.request('user/userInfo').then((res) => {
					if (res.code) {
						that.$db.set('userInfo',res.user)
						
						that.userInfo = res.user
						that.index = res.user.sex?res.user.sex:0
						that.types = [that.index]
						
						let pic = that.userInfo.pic.indexOf('http') > -1 ? that.userInfo.pic : 'https://cdnauth.dreamyuewen.com' + that.userInfo.pic
						that.fileList = [pic]
					} else {
						that.$common.errorToShow(res.msg)
					}
				})
			},
			onChooseAvatar(e) {
				this.$common.uploadImg(e.detail.avatarUrl, (data) => {
					if (data) {
						this.saveUser({
							'pic': data
						})
					}
				})
			},
			async onChooseImg() {
				let auth = db.get('auth');
				console.log(auth, 777777777)
				//用户存在，不跳转，不存在直接跳转
				if (!auth) {
					// toLogin()
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}
			
				await this.$common.chooseImage({}, (data) => {
					if (data) {
						this.saveUser({
							'pic': data
						})
					}
				}, 9)
			
			},
			bindNick(e) {
				console.log(e)
				if (e.detail.value != this.userInfo.username) {
					this.userInfo.username = e.detail.value
					this.saveUser({
						'username': this.userInfo.username
					})
				}
			},
			saveUser(data) {
				this.$api.default.request('user/saveUser', data).then((res) => {
					if (res.code == 1) {
						this.userInfo = res.user
						this.$common.successToShow(res.msg)
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			// 头像弹框
			open() {
				
			},
			close() {
				this.show = false
			},
			// 生日
			 bindDateChange: function(e) {
				if(new Date(e.detail.value).getTime() > new Date().getTime()){
					this.$common.errorToShow('请认真填写哦~')
					return
				}
				 
				this.date = e.detail.value
				this.saveUser({
					'birthday': e.detail.value
				})
			},
		}
	}
</script>

<style lang="scss">
	.custom-bot {
		text-align: center;
		background-color: #fff;
		
		.title{
			padding: 20px 0;
			font-family: '思源黑体';
			font-size: 14px;
			font-weight: bold;
			color: #3D3D3D;
		}
	
		.picker-view {
			width: 750rpx;
			height: 200rpx;
		}
	
		.item {
			height: 34px;
			line-height: 34px;
			font-family: '思源黑体';
			font-size: 15px;
			font-weight: bold;
			color: #3D3D3D;
		}
		
		.marginBorder{
			width: 100%;
			height: 10px;
			background: #F2F5F2;
		}
		
		.btn{
			margin: 10px auto;
			width: 315px;
			height: 40px;
			line-height: 40px;
			border-radius: 8px;
			background: #45C4B0;
			font-family: '思源黑体';
			font-size: 16px;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
	
	page {
		background: rgba(242, 245, 242, 1);
	}
	.content {
		padding-top: 20rpx;
		.baibox{
			background-color: #ffffff;
			padding: 0 68rpx;
			margin-bottom: 20rpx;
			.baili:last-child{
				border: none;
			}
			.baili{
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 120rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);
				
				.txt{
					flex-grow: 1;
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
					flex-shrink: 0;
				}
				.cenbox{
					flex-grow: 1;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					padding: 0 16rpx;
					.headpic{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
					.centxt{
						font-size: 28rpx;
						font-weight: normal;
						text-align: right;
						letter-spacing: 0em;
						color: #999999;
						width: 400rpx;
					}
					.is_auth{
						color:#45C4B0;
						font-weight: bold;
					}
					.is_no_auth{
						color:#999;
					}
					.qianbox{
						text-align: right;
						width: 450rpx;
						white-space: nowrap;
						.qli{
							background: rgba(153, 153, 153, 0.102);
							padding: 2px 8px 2px 6px;
							border-radius: 89px;
							font-family: 思源黑体;
							font-size: 12px;
							// font-weight: bold;
							color: #999;
							display: inline-block;
						}
						.qli:not(:first-child){
							margin-left: 16rpx;
						}
					}
				}
				.rarr{
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
				}
			}
		}
		.mask{
			background: #F2F5F2;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			overflow: hidden;
			.manei{
				margin-bottom: 20rpx;
				background-color: #ffffff;
				.matop{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 40rpx 50rpx ;
					border-bottom: 1px solid rgba(153, 153, 153, 0.1);
					
					.mapic{
						width: 40rpx;
						height: 40rpx;
						flex-shrink: 0;
					}
					.matxt{
						flex-grow: 1;
						font-size: 28rpx;
						padding: 0 16rpx;
						font-weight: bold;
						letter-spacing: 0em;
						color: #3D3D3D;
					}
				}
			}
			
			.qubox{
				line-height: 120rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
				height: 120rpx;
				opacity: 1;
				background: #FFFFFF;
			}
		}
	}
</style>